<template>
  <div class="model-con">
    <div class="title">评价情况</div>
    <div class="mytable">
      <vxe-table
        v-loading="loading"
        class="mytable-scrollbar"
        border
        stripe
        max-height="500"
        row-id="id"
        size="medium"
        resizable
        :scroll-y="{ enabled: false }"
        :data="tableData"
        highlight-hover-row
        header-align="center"
        align="center"
        @cell-click="cellClickEvent">
        <vxe-column field="typeName" title="评价类型" min-width="150"></vxe-column>
        <vxe-column field="total" title="评价数量" min-width="150"></vxe-column>
        <vxe-column field="completedNum" title="已完成" min-width="150"></vxe-column>
        <vxe-column field="noCompleteNum" title="未完成" min-width="150"></vxe-column>
        <vxe-column field="noCreateNum" title="未生成" min-width="150"></vxe-column>
      </vxe-table>
    </div>

    <!-- 应评价人员 开始-->
    <XnDialog
      custom-class="branch_dialog"
      :title="dialogName"
      :visible.sync="dialogShow"
      @close="dialogShow = false"
      v-loading="tableLoading">
      <el-tabs v-model="activeName" @tab-click="handleClickTabs">
        <el-tab-pane :label="'已完成(' + completedNum + ')'" name="2"></el-tab-pane>
        <el-tab-pane :label="'未完成(' + noCompleteNum + ')'" name="1"></el-tab-pane>
        <el-tab-pane :label="'未生成(' + noCreateNum + ')'" name="0"></el-tab-pane>
      </el-tabs>
      <vxe-table
        class="mytable-scrollbar"
        border
        stripe
        max-height="500"
        row-id="id"
        size="medium"
        resizable
        :scroll-y="{ enabled: false }"
        :data="tableData2"
        highlight-hover-row
        header-align="center"
        align="center">
        <vxe-column field="userName" title="人员" min-width="100"></vxe-column>
        <vxe-column field="orgName" title="部门" min-width="120"></vxe-column>
        <vxe-column field="status" title="评价情况" min-width="120">
          <template #default="{ row }">
            {{ row.status | handelStatus }}
          </template>
        </vxe-column>
      </vxe-table>
    </XnDialog>
    <!-- 应评价人员 结束-->
  </div>
</template>

<script>
import { getAllAssessDeal, queryAllAssessDealDetail } from '@api/modules/api-staAnalysis.js'
import XnDialog from '@com/xnDialog.vue'

export default {
  name: 'EvaluationSituation',
  components: { XnDialog },
  props: {
    selectParams: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      loading: false,
      tableData: [],
      tableData2: [],
      dialogShow: false,
      // 应评价人员点击弹框数据
      tablePage: {
        pageNum: 1,
        pageSize: 10,
        totalSize: 0,
      },
      activeName: '1',
      completedList: [], // 某评价类型已完成人数列表
      noCompleteList: [], // 某评价类型未完成人数列表
      completedNum: 0,
      noCompleteNum: 0,
      noCreateNum: 0,
      dialogName: '',
      tableLoading: false,
      assessType: '',
    }
  },
  watch: {
    selectParams: {
      handler(newValue, oldValue) {
        console.log('newValue :>> ', newValue)
        if (newValue.quarter && newValue.year && newValue.pid === '-1') {
          this.pageInit()
        }
      },
      deep: true,
      immediate: true,
    },
  },
  filters: {
    handelStatus(val) {
      return val === 0 ? '未生成' : val === 1 ? '未完成' : '已完成'
    },
  },
  methods: {
    async pageInit() {
      this.loading = true
      const { data = [] } = await getAllAssessDeal({
        ...this.selectParams,
      })
      this.loading = false
      this.tableData = data
    },
    // 点击单元格
    cellClickEvent({ row, column }) {
      this.dialogName = row.typeName
      this.activeName = column.property === 'noCompleteNum' ? '1' : column.property === 'noCreateNum' ? '0' : '2'
      this.completedNum = row.completedNum || 0
      this.noCompleteNum = row.noCompleteNum || 0
      this.noCreateNum = row.noCreateNum || 0
      this.assessType = row.assessCode
      this.handleClickTabs()
      this.dialogShow = true
    },
    /* 切换 */
    handleClickTabs() {
      this.tablePage.pageNum = 1
      this.tablePage.pageSize = 10
      this.queryAllAssessDealDetail()
    },
    /* 处理分页数据 */
    handleList(list) {
      if (list.length === 0) {
        return []
      }
      const sInx = (this.tablePage.pageNum - 1) * this.tablePage.pageSize + 1
      const eInx = sInx + this.tablePage.pageSize
      return list.slice(sInx - 1, eInx - 1)
    },
    // 获取评价情况列表
    async queryAllAssessDealDetail() {
      // this.tableLoading = true
      const params = {
        ...this.selectParams,
        status: this.activeName,
        // current: this.tablePage.pageNum,
        // size: this.tablePage.pageSize,
        assessType: this.assessType,
      }
      const { data = [] } = await queryAllAssessDealDetail(params)
      this.tableLoading = false
      this.tableData2 = data
      // this.tablePage.totalSize = total
    },
  },
}
</script>

<style lang="scss" scoped>
.model-con {
  border: 1px solid #ebeef5;
  padding: 20px;
  .title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
  }
  .sub-title {
    font-size: 14px;
    color: #333;
    margin-top: 15px;
  }
  .mytable {
    margin-top: 30px;
    .status {
      color: #bc1316;
    }
    .click-cell {
      cursor: pointer;
      &:hover {
        text-decoration-line: underline;
        color: #0957af;
      }
    }
    /deep/.vxe-body--column {
      cursor: pointer;
      &:hover .vxe-cell--label {
        text-decoration-line: underline;
        color: #0957af;
      }

      &.col-cursor-over {
        color: #ccc;
      }
      &.col-cursor-ing {
        color: #bc1316;
      }
      &.col-cursor-not {
        color: #bc1316;
        cursor: pointer;
        &:hover {
          text-decoration-line: underline;
          color: #0957af;
        }
      }
    }
  }
}
.branch_dialog1 {
  /deep/.el-dialog__body {
    padding: 0;
    .notice-list {
      .notice-li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
        border-bottom: 1px solid #ddd;
        padding: 0 20px;
        font-size: 14px;
        &.first {
          background: #f2f2f2;
        }
        i {
          font-size: 16px;
          &.red {
            color: #bc1316;
          }
          &.green {
            color: #20b759;
          }
        }
      }
    }
  }
}
.redColor {
  color: #b61213;
}
.bth_box {
  position: absolute;
  right: 20px;
  cursor: pointer;
  z-index: 999;
}
</style>
